import React from 'react';
import DrawerEnhance from "common/drawer/DrawerEnhance";
import {useLocation, useNavigate} from "react-router-dom";
import {Consume} from "type/Consume";
import LogFactory from "log/LogFactory";
import {App, Button, DatePicker, Form, Input, InputNumber, Select} from "antd";

import TextArea from "antd/es/input/TextArea";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import dayjs from "dayjs";
import {MATHEMATICAL_PRECISION} from "constant/Common";
import {fetchLoadItemOptions, fetchUpdateConsume} from "../../../redux/reducer/async/consumeAsyncAction";
import {compareObject} from "util/compare";

const log = LogFactory.getLog("ConsumeUpdateComponent");

const ConsumeUpdateComponent = () => {
    const consume = useLocation().state as Consume ;
    const [form] = Form.useForm<Consume>();
    const state = useAppSelector(state => state.consume) ;
    const dispatch = useAppDispatch();
    const { message } = App.useApp() ;
    const navigate = useNavigate() ;
    log.debug("更新消费记录: " , consume) ;
    const onFinish = async (values: Consume) => {
        values.consumeDate = values.consumeDate.format("YYYY-MM-DD") ;
        values.money = values.money * MATHEMATICAL_PRECISION ;
        log.debug("更新消费记录: " , consume) ;
        let compRes = compareObject(consume,values) ;
        if (compRes == null){
            message.info("数据没有变化,无需更新") ;
            return ;
        }
        values.id = consume.id ;
        let res = await dispatch(fetchUpdateConsume(values)).unwrap() ;
        if (res !== null){
            message.success("更新消费记录成功") ;
            navigate("..", {replace: true}) ;
        }
    } ;

    const afterOpenChange = async () => {
        if (state.itemOptions === void 0){
           dispatch(fetchLoadItemOptions()) ;
        }
    } ;
    return (
        <DrawerEnhance title={"更新消费记录"} afterOpenChange={afterOpenChange}>
            <Form<Consume>
                layout="vertical"
                form={form}
                onFinish={onFinish}
                initialValues={{...consume,consumeDate: dayjs(consume.consumeDate),money: consume.money / MATHEMATICAL_PRECISION}}
            >
                <Form.Item<Consume> label="消费项目" name={"item"} rules={[{required: true, message: '消费项目必须选择一个'}]}>
                    <Select placeholder={"请选择项目"} options={state.itemOptions}>
                    </Select>
                </Form.Item>

                <Form.Item<Consume> name={"money"} label="消费金额"
                                    rules={[{required: true, message: '消费金额不能为空'}]}>
                    <InputNumber min={0.00} precision={2} addonBefore={"¥"}/>
                </Form.Item>
                <Form.Item<Consume> name={"consumeDate"} label="消费时间"
                                    rules={[{required: true, message: '消费时间不能为空'}]}>
                    <DatePicker format={"YYYY-MM-DD"}/>
                </Form.Item>
                <Form.Item<Consume> label="消费说明" name={"explain"}>
                    <Input/>
                </Form.Item>
                <Form.Item<Consume> label="数据排序" name={"order"}>
                    <InputNumber min={0} addonAfter={"排序"}/>
                </Form.Item>
                <Form.Item<Consume> label="备注信息" name={"remark"}>
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item>
                    <Button loading={false} type="primary" htmlType="submit">
                        提交修改
                    </Button>
                </Form.Item>
            </Form>
        </DrawerEnhance>
    );
};

export default ConsumeUpdateComponent;